<template>
  <div class="app-container">
    <div class="ui_home_left ui_home">
      <div class="ui_home_tlt">
        <span>当前地图：</span>
        <el-select v-model="value" placeholder="请选择" @change="currentMap">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        *显示当前地图活跃机器人的位置和运行轨迹
      </div>
      <div id="zoomBar">
        <el-button-group>
          <el-button type="primary" size="small" round @click="zoomIn">缩小</el-button>
          <el-button type="primary" size="small" round>1&nbsp;:&nbsp;{{ parseFloat(zoo).toFixed(1) }}</el-button>
          <el-button type="primary" size="small" round @click="zoomOut">放大</el-button>
        </el-button-group>
      </div>
      <div id="viewdiv" />
    </div>
    <div class="ui_home_right ui_home">
      <div class="ui_home_tlt">机器人列表</div>
      <div class="ui_t_h">
        <el-table :data="tableData" style="width: 100%" :show-header="false">
          <el-table-column prop="" label="">
            <template slot-scope="scope">
              <div>{{ scope.row.name }}</div>
              <div>{{ parseFloat(scope.row.x).toFixed(4) }},{{ parseFloat(scope.row.y).toFixed(4) }},{{ parseFloat(scope.row.yaw).toFixed(0) }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>、
    </div>
  </div>
</template>
<style scoped>
    .ui_t_h{
      height: calc(100vh - 190px);
      overflow-y: auto;
      position: absolute;
      width: 100%;
    }
    .ui_home{
        border:1px solid #cccccc;
        position: absolute;
        height: calc(100vh - 140px);
    }
    .ui_home_left{
        width:75%;
    }
    .ui_home_right{
        width: 22%;
        right: 10px;
    }
    .ui_home_tlt{
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        border-bottom: 1px solid #cccccc;
    }
    .ui_home_tlt span{
       font-weight: bold;
       margin-right: 5px;
    }
    #viewdiv{
        margin: 0;
        padding:0;
        height: calc(100vh - 190px);
        position:absolute;
        overflow: hidden;
        width: 100%;
    }
    #zoomBar{
      float: right;
      margin-top: -41px;
      margin-right: 20px;
    }
</style>

<script>
import { queryPoint, editPointDone, removePointDone, listRobot, mapPreview, getConfig, listMapAll, enableMapInfo } from '@/api/map/map'
import pictureMap from '@/utils/pictureMap.js'
export default {
  data: function() {
    return {
      form: {

      },
      tableData: [],
      dialogVisible: false,
      MapId: 0,
      zoo: 1,
      options: [],
      value: '',
      timer: ''
    }
  },
  mounted: function() {
    // this.getMap()
    this.getListMapAll()
    this.getSiteMap()
  },
  beforeDestroy: function() {
    clearInterval(this.timer)
  },
  methods: {
    init: function() {
      this.form = {}
      this.tableData = []
      this.dialogVisible = false
      this.MapId = 0
      this.zoo = 1
    },
    currentMap: function(id) {
      const param = {
        id: id
      }
      enableMapInfo(param).then(response => {
        this.init()
        // this.getMap()
        this.getSiteMap()
        this.$message({
          type: 'success',
          message: '切换成功！'
        })
      })
    },
    editorList: function(index, data) {
      var that = this
      that.form = data
      that.dialogVisible = true
    },
    deleteList: function(index, data) {
      var that = this
      this.$confirm('此操作将该点删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定的操作(调用接口)
        removePointDone(data)
        this.$message({
          type: 'success',
          message: '已删除！'
        })
        that.tableData.splice(index, 1)
        that.map.removePoint(that.form.mapId)
      }).catch(() => {
        // 几点取消的提示
        this.$message({
          type: 'success',
          message: '已取消！'
        })
      })
    },
    /**
         * 取消添加点位
         */
    cacle: function() {
      this.dialogVisible = false
    },
    zoomIn: function() {
      this.map.zoomReduce()
      this.zoo = this.map.getScale()
    },
    zoomOut: function() {
      this.map.zoomPlus()
      this.zoo = this.map.getScale()
    },
    /**
         * 确定添加点位
         */
    editPoint: function() {
      var that = this
      this.dialogVisible = false
      editPointDone(this.form).then(response => {
        that.$message({
          type: 'success',
          message: '编辑保存成功！'
        })
        that.map.updateContent(that.form.mapId, that.form.name)
      })
      //             this.tableData.push(this.form);
    },
    getPoints: function() {
      const that = this
      const data = []
      that.markerImg = '<i class="el-icon-s-finance" style="color: red"></i>'
      const param = {
        mapId: that.pictureMapId,
        active: true
      }
      listRobot(param).then(response => {
        var result = response.data
        result.forEach(element => {
          if (element.pose.x) {
            data.push({
              'id': element.id,
              'name': element.name,
              'x': parseFloat(element.pose.x.replace('--', '-')),
              'y': parseFloat(element.pose.y),
              'yaw': parseFloat(element.pose.yaw),
              'mapId': element.id,
              ip: element.ip,
              port: element.port,
              mac: element.mac
            })
          }
        })
      }).then(function() {
        that.tableData = data
        if (that.map != null) {
          that.map.addPOIPoints(data, true)
        }
      })
      // queryPoint().then(response => {
      //   this.tableData = response.data;
      //   this.map.addPOIPoints(response.data);
      // })
    },
    repeat: function() {
      var that = this
      var data = []
      queryPoint({
        'mapId': that.MapId
      }).then(response => {
        var result = response.data
        result.forEach(element => {
          if (element.x) {
            data.push({
              'name': element.name,
              'x': parseFloat(element.x),
              'y': parseFloat(element.y),
              'yaw': parseFloat(element.yaw),
              'mapId': element.id
            })
          }
        })
      }).then(function() {
        that.tableData = data
        that.map.removePoints()
        that.map.addPOIPoints(data)
      })
    },
    getListMapAll: function() {
      listMapAll().then(response => {
        response.data.forEach((item) => {
          const name = (!item.name && typeof (item.name) !== 'undefined' && item.name !== 0) || item.name === '' ? '未命名' : item.name
          const option = {
            value: item.id,
            // eslint-disable-next-line no-undef,eqeqeq
            label: item.id + '--' + name
          }
          this.options.push(option)
          if (item.enabled === true) {
            this.value = item.id + '--' + name
          }
        })
      })
    },
    getMap: function() {
      const that = this
      getConfig().then(response => {
        if (response.data.mapId == null) {
          this.$alert('请选择有效的地图', '暂无地图', {
            confirmButtonText: '确定'
          })
          return
        }
        const originX = response.data.originX
        const originY = response.data.originY
        that.MapId = response.data.mapId

        // eslint-disable-next-line new-cap
        that.map = new pictureMap({
          viewId: 'viewdiv', // 地图ID（必填参数）
          mapImg: mapPreview(), // 地图底图（可选参数，可无底图）
          markerImg: '<i class="el-icon-s-finance" style="color: red"></i>', // POI点的图标（可选参数）
          isEditor: false, // 是否开启编辑功能
          originX: originX,
          originY: originY,
          pMapId: that.MapId,
          resolution: response.data.resolution,
          width: response.data.with,
          height: response.data.height,
          isRealSize: true,
          uploadFun: function(data) {
            that.form = data
            that.dialogVisible = true
          }, // 上传POI点,自处理
          clickFun: function(data) {

          }// 点击POI点所触发的事件,data数据格式{dataId:dateId,top:top,left:left,attributes:attributes};（可选参数，可以不上传）
        }, that)
        this.zoo = this.map.getScale()
        that.getPoints()
        // 加载历史点位信息
        /* that.map.addPOIPoints([{
                dataId: "20200920185349",
                dataName: "",
                x: -144.5468928,
                y: -161.488768
              }]);*/
      })
    },
    getSiteMap: function() {
      const that = this
      getConfig().then(response => {
        if (response.data.mapId == null) {
          this.$alert('请选择有效的地图', '暂无地图', {
            confirmButtonText: '确定'
          })
        }
        const originX = response.data.originX
        const originY = response.data.originY
        that.pictureMapId = response.data.mapId
        that.map = new pictureMap({
          viewId: 'viewdiv', // 地图ID（必填参数）
          mapImg: mapPreview(), // 地图底图（可选参数，可无底图）
          markerImg: '<i class="el-icon-location" style="color: #1890ff"></i>', // POI点的图标（可选参数）
          markerStart: '<i class="el-icon-location" style="color: mediumseagreen"></i>', // POI点的图标（可选参数）
          isEditor: false, // 是否开启编辑功能
          originX: originX,
          originY: originY,
          pictureMapId: that.pictureMapId,
          resolution: response.data.resolution,
          width: response.data.with,
          height: response.data.height,
          isRealSize: true,
          uploadFun: function(data) {
            that.form = data
            that.dialogVisible = true
            that.isEditOrAdd = 2
          }, // 上传POI点,自处理
          clickFun: function(data) {
            console.log('data' + data)
          }// 点击POI点所触发的事件,data数据格式{dataId:dateId,top:top,left:left,attributes:attributes};（可选参数，可以不上传）
        }, that)
        that.zoom = this.map.getScale()
        that.getSitePoints()
      })
    },
    getSitePoints: function() {
      var that = this
      queryPoint({
        'mapId': that.pictureMapId
      }).then(response => {
        this.map.removePoints()
        this.map.addPOIPoints(response.data)
        this.timer = setInterval(this.getPoints, 3000)
      })
    }
  }
}
</script>
